<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a responsive email layout.">
    <title>XXForm 用户列表</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/pure-min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <script th:src="@{/js/vue-min.js}"></script>
    <script th:src="@{/js/main.js}"></script>
</head>
<body>

<div id="layout" class="content pure-g">

    <div th:include="home/_nav.html" id="nav" class="pure-u"></div>

    <div id="main" class="pure-u-1">
        <div class="content">
            <div class="content-header pure-g">
                <div class="pure-u-1-2">
                    <h1 class="content-title">用户管理</h1>
                    <p class="content-subtitle">
                        用户总数：<b class="count">{{allCount}}</b> 个
                    </p>
                    <breadcrumb ref="bredc"></breadcrumb>
                </div>
                <div class="content-controls pure-u-1-2">
                    <form class="pure-form">
                        <fieldset>
                            <input type="text" class="pure-input" placeholder="搜索..." v-model="keyword" />
                            <button type="button" class="pure-button btn-green"><img src="/images/i-add.png" /> 添加账户</button>
                        </fieldset>
                    </form>
                    
                </div>
            </div>
            <div class="content-body">
                
                <table class="pure-table pure-table-bordered" style="width: 100%;">
                    <thead>
                        <tr>
                            <th style="width: 120px;">头像</th>
                            <th>用户信息</th>
                            <th>使用信息</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in dataList">
                            <td>
                                <img v-bind:src="'/resource/image/area/' + item.image" style="max-width: 120px;" v-if="item.image.length>5" />
                                <img th:src="@{/images/default.jpg}" style="max-width: 120px;" v-else />
                            </td>
                            <td>
                                <small>ID: {{item.id}}</small><br>
                                <b>{{item.en}} {{item.name}}</b><br>
                                <small>使用币种：{{item.currency}}<b></b> &nbsp;&nbsp; 所在时区：<b>{{item.timezone}}</b></small>
                            </td>
                            <td></td>
                            <td>
                                <button class="pure-button btn-xs btn-normal" v-if="item.level<2" @click="onLevel(item.id,item.name)"><i class="fa fa-download"></i> 下级</button>
                                <button class="pure-button btn-xs btn-green" @click="edit(item.id)"><i class="fa fa-pen-to-square"></i> 编辑</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <pagination ref="pageView"></pagination>
            </div>
        </div>
        <!--角色编辑框-->
        <div class="modal-wrap" v-show="editModal" @click="editModal=false">
            <div class="modal-box" @click.stop="">
                <div class="modal-title">编辑预设</div>
                <div class="modal-body">
                    <form class="pure-form pure-form-stacked">
                        <fieldset>
                            <div class="pure-g">
                                <div class="pure-u-1-2">
                                    <p style="padding:0 1em">
                                        <label>角色代称:</label>
                                        <input type="text" class="pure-input-1" />
                                    </p>
                                    <p style="padding:0 1em">
                                        <label>驱动模型:</label>
                                        <select class="pure-input-1">
                                            <option value="abab5">abab5</option>
                                            <option value="abab5.5">abab5.5</option>
                                        </select>
                                    </p>
                                    <p style="padding:0 1em">
                                        <label>随机值:</label>
                                        <select class="pure-input-1">
                                            <option>0.1</option>
                                            <option>0.3</option>
                                            <option>0.5</option>
                                            <option>0.7</option>
                                            <option>0.9</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="pure-u-1-2">
                                    <p style="padding:0 1em">
                                        <label>客户代称:</label>
                                        <input type="text" class="pure-input-1" />
                                    </p>
                                    <p style="padding:0 1em">
                                        <label>令牌长度:<small> (10 ~ 6000)</small></label>
                                        <input type="text" class="pure-input-1" />
                                    </p>
                                    <p style="padding:0 1em">
                                        <label>隐私脱敏:</label>
                                        <label class="radio"><input type="radio" value="0"> 否</label>
                                        <label class="radio"><input type="radio" value="1"> 是</label>
                                    </p>
                                </div>
                                <div class="pure-u-1">
                                    <p style="padding:0 1em">
                                        <label>背景预设:<small> (1000字以内)</small></label>
                                        <textarea class="pure-input-1" style="height: 8em;"></textarea>
                                    </p>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="pure-button btn-orange pull-left" >删除</button>
                    <button type="button" class="pure-button btn-normal" @click="editModal=false">取消</button>
                    <button type="button" class="pure-button btn-green">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const LIMIT = 10;
    const vue = new Vue({
        el: '#main',
        data: {
            offset: 0,
            fid: '0',
            keyword: '',
            dataList: [],
            allCount: 0,
            editModal: false
        },
        components: {
            pagination: Pagination
        },
        watch: {
            keyword: function () {
                vue.offset = 0;
                vue.loadList();
            }
        },
        methods: {
            init: function () {
                this.$refs['pageView'].init(LIMIT, 5);
                this.$refs['pageView'].setCallback(function (page) {
                    vue.offset = (page - 1) * LIMIT;
                    vue.loadList();
                });
                this.loadList();
            },
            loadList: function () {
                /*
                lets.post('/area/getCount.do', {
                    fid: vue.fid,
                    keyword: vue.keyword
                }).then(res => {
                    if (res.code == 1) {
                        vue.allCount = res.result;
                        vue.$refs['pageView'].setData(res.result, this.offset == 0 ? true : false);
                    }
                });
                lets.post('/area/getList.do', {
                    offset: vue.offset,
                    limit: LIMIT,
                    fid: vue.fid,
                    keyword: vue.keyword
                }).then(res => {
                    if (res.code == 1) {
                        vue.dataList = res.result;
                    }
                });*/
            }
        }
    });
    vue.init();
</script>
</body>
</html>